<template>
    <a-tabs v-model:activeKey="activeKey" style="width: 100%" destroyInactiveTabPane>
        <a-tab-pane :key="index" v-for="(item, index) in list" :tab="item.name">
            <div class="CodeTabPaneView" v-if="item.type == 'img'">
                <div class="imgView"><img :src="item.Code" alt /></div>
            </div>
            <div class="CodeTabPaneView" v-else-if="item.type == 'vue'">
                <pre class="line-numbers"><code class="language-html">{{ item.Code }}</code></pre>
            </div>
            <div class="CodeTabPaneView" v-else-if="item.type == 'js'">
                <pre class="line-numbers"><code class="language-javascript">{{ item.Code }}</code></pre>
            </div>
        </a-tab-pane>
    </a-tabs>
</template>
<script setup>
import { nextTick, onMounted, ref, watch } from "vue";
defineProps({ list: Array });
const activeKey = ref(0);

onMounted(() => {
    Prism.highlightAll();
});

watch(activeKey, () => {
    nextTick(() => {
        Prism.highlightAll();
    });
});

defineExpose({
    SetValue: function (val) {
        activeKey.value = val;
    },
});
</script>
<style lang="less" scoped></style>
